import { Component } from "react";
import './header.scss'
class Header extends Component {
    state = {
        title:"",
        content:"",
    }
    // 发表人
    updateIpt = (e)=>{
        let tit = e.target.value
        this.setState({ title: tit })
        
     }
//  描述
     updateArea= (e)=>{
         let content = e.target.value
         this.setState({ content })//同名可以简写
      }
    //  添加评论
     submit= ()=>{
        const { title, content } = this.state
        // 向父组件传值
        this.props.callback({
            title,
            content
        })
     }
    render() {
        return (<>
            <div className='top'>
                
                <input value={this.state.title} onChange={this.updateIpt} className='ipt' type="text" placeholder='请输入昵称' />
                <textarea  value={this.state.content} onChange={this.updateArea} className='textarea' placeholder='请输入评论内容' cols="30" rows="6"></textarea>
                <button className='submit' onClick={this.submit}>发表评论</button>
            </div>
        </>)
    }


}
export default Header